<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.param"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script>
import { signUpPage } from "@/api/module/student/information-tracking";
import { reactive, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import { filterEmptyByObject } from "@/tools/common";

export default {
  name: "failure-record",
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

    const columns = [
      {
        title: t("sendingTranscripts.label.semester"),
        dataIndex: "semester",
        key: "semester",
        width: 130,
      },
      {
        title: t("sendingTranscripts.label.hostUniversity"),
        dataIndex: "school",
        key: "school",
        width: 130,
        ellipsis: true,
      },
      {
        title: t("sendingTranscripts.label.project"),
        dataIndex: "project",
        key: "project",
        width: 130,
        ellipsis: true,
      },
      {
        title: t("sendingTranscripts.label.courseCode"),
        dataIndex: "cozNum",
        key: "cozNum",
        width: 130,
        ellipsis: true,
      },
      {
        title: t("sendingTranscripts.label.curriculum"),
        dataIndex: "cozName",
        key: "cozName",
        width: 130,
      },
      {
        title: t("sendingTranscripts.label.student"),
        dataIndex: "stuName",
        key: "stuName",
        width: 130,
      },
      {
        title: t("sendingTranscripts.label.failureStatus"),
        dataIndex: "creditSts",
        key: "creditSts",
        width: 100,
        cellRender: (record, data) => {
          const item = dictLists.data[dictEnum.CREDIT_STATUS]
            ? dictLists.data[dictEnum.CREDIT_STATUS].find(
                (v) => v.value == data
              )
            : {};
          return item ? item.label : "";
        },
      },
      {
        title: t("sendingTranscripts.label.failureReason"),
        dataIndex: "creditReason",
        key: "creditReason",
        width: 130,
        ellipsis: true,
      },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await signUpPage(param);
      return {
        data: response.data.record,
        total: response.data.total,
      };
    };
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
    });

    const searchParam = reactive({
      param: [],
    });

    const search = function (value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
      };
    };
    const onReset = function () {
      state.param = {};
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };
    const dictLists = reactive({
      data: {},
    });
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.CLASS_STATUS, // 课程状态
        dictEnum.COURSE_STATUS, // 课程认证状态
        dictEnum.CREDIT_STATUS, // 学分认证状态
        dictEnum.PAY_STATE, // 订单支付状态
      ]);
      searchParam.param = [
        {
          key: "school",
          type: "input",
          label: t('sendingTranscripts.label.university'),
          placeholder: t("placeholder.pleaseEnter"),
        },
        {
          key: "semester",
          type: "input",
          label: t('sendingTranscripts.label.semester'),
          placeholder: t("placeholder.pleaseEnter"),
        },
        {
          key: "cozName",
          type: "input",
          label: t('sendingTranscripts.label.curriculum'),
          placeholder: t("placeholder.pleaseEnter"),
        },
        {
          key: "stuName",
          type: "input",
          label: t('sendingTranscripts.label.student'),
          hidden: true,
          placeholder: t("placeholder.pleaseEnter"),
        },
        {
          key: "payStatus",
          type: "select",
          options: dictLists.data[dictEnum.PAY_STATE],
          label: t('sendingTranscripts.label.paymentStatus'),
          hidden: true,
          placeholder: t("placeholder.pleaseSelect"),
        },
        {
          key: "courSts",
          type: "select",
          options: dictLists.data[dictEnum.COURSE_STATUS],
          label: t('sendingTranscripts.label.authenticationStatus'),
          hidden: true,
          placeholder: t("placeholder.pleaseSelect"),
        },
        {
          key: "classSts",
          type: "select",
          options: dictLists.data[dictEnum.CLASS_STATUS],
          label: t('sendingTranscripts.label.classStatus'),
          hidden: true,
          placeholder: t("placeholder.pleaseSelect"),
        },
        {
          key: "creditSts",
          type: "select",
          options: dictLists.data[dictEnum.CREDIT_STATUS],
          label: t('sendingTranscripts.label.transferStatus'),
          hidden: true,
          placeholder: t("placeholder.pleaseSelect"),
        },
      ];
    });
    return {
      t,
      state,
      fetch,
      search,
      onReset,
      columns,
      pagination,
      searchParam,
      onSelectChange,
      tableRef,
    };
  },
};
</script>
